<script setup>
	import { ref, defineProps, defineEmits, nextTick } from 'vue'
	import { updateOrderService } from '../api/order'
	
	const props = defineProps({
		order: {
			type: Object,
			default: () => {}
		},
		goods: {
			type: Object,
			default: () => {}
		}
	})
	
	const order = ref(props.order)
	const goods = ref(props.goods)
	
	
	const orderStatus = [
		{
			status: 0,
			lable: '未支付',
			color: 'red'
		},
		{
			status: 1,
			lable: '待发货',
			color: 'skyblue'
		},
		{
			status: 2,
			lable: '已发货',
			color: 'blue'
		},
		{
			status: 3,
			lable: '已完成',
			color: 'green'
		},
		{
			status: 4,
			lable: '退款中',
			color: '#55007f'
		},
		{
			status: 5,
			lable: '退款完成',
			color: 'pink'
		},
		{
			status: 6,
			lable: '取消订单',
			color: 'purple'
		},
	]
	
	// 订单状态显示
	const getOrderStatus = (status) => {
		const res = orderStatus.find(item => item.status == status)
		let lable = res ? res.lable : ''
		let color = res ? res.color : 'black'
		return {"lable": lable, "color": color}
	}
	
	const emits = defineEmits(['loadData'])
	
	const refundRemark = ref('')
	const inputDialog = ref(null)
	
	const handlePayChange = async (status) => {
		if(status === 4){
			inputDialog.value.open()
			return 0
		}
		let form = {...order.value}
		form.status = status
		await updateOrderService(form)
		emits('loadData')
		uni.showToast({
			title:'操作成功'
		})
		
	}
	
	const dialogInputConfirm = async () => {
		let form = {...order.value}
		form.status = 4
		form.refundRemark = refundRemark.value
		await updateOrderService(form)
		emits('loadData')
		uni.showToast({
			title:'退款中...'
		})
	}

</script>

<template>
	<view>
		<view class="order">
			<view class="order-head">
				<text>订单号：{{ order.orderNo }}</text>
				<text :style="'color: ' + getOrderStatus(order.status).color + ';'">{{ getOrderStatus(order.status).lable }}</text>
			</view>
			<view class="order-body">
				<view class="order-left">
					<image :src="`https://images.weserv.nl/?url=${goods.images}`" mode="scaleToFill"></image>
				</view>
				<view class="order-right">
					<view class="order-right-text">
						<text>{{ goods.goodName }} <text class="money">￥{{ goods.price *  order.buyNum }}</text></text>
					</view>
					<view class="order-right-btn">
						<button @click='handlePayChange(6)'  v-if='order.status === 0'>取消</button>
						<button @click='handlePayChange(1)' v-if="order.status === 0">立即付款</button>
						<button @click='handlePayChange(4)' v-if="order.status === 2">申请退款</button>
						<button @click='handlePayChange(3)' v-if="order.status === 2">确认收获</button>
					</view>
				</view>
			</view>
		</view>
		
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"  mode="input" title="请输入退款留言" v-model="refundRemark"
					placeholder="可留空" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>


<style scoped lang="scss">
	.order {
		margin:  20rpx;
		width: 95%;
		height: 320rpx;
		border-bottom: 2.8rpx solid #cfd1cd;
		.order-head {
			display: flex;
			justify-content: space-between;
			margin-bottom: 15rpx;
		}
		.order-body {
			display: flex;
			height: 250rpx;
			.order-left {
				width: 40%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.order-right {
				margin-top: 50rpx;
				margin-left: 35rpx;
				width: 60%;
				
				.order-right-btn {
					margin-top: 50rpx;
					display: flex;
					align-items: center;
				}
				
				.money {
					color: red;
				}
			}
		}
	}
</style>